<template>
  <div id="app">
    <BxConfigProvider :globalConfig="globalConfig">
      <div class="app-container">
        <!-- 头部导航 -->
        <BxHeader class="app-header">
          <div class="header-content">
            <div class="logo">
              <BxIcon name="box" />
              <span class="logo-text">Benxin UI</span>
            </div>
            <BxMenu mode="horizontal" :defaultActive="activeMenu" @select="handleMenuSelect">
              <BxMenuItem index="overview">组件概览</BxMenuItem>
              <BxMenuItem index="basic">基础组件</BxMenuItem>
              <BxMenuItem index="layout">布局组件</BxMenuItem>
              <BxMenuItem index="navigation">导航组件</BxMenuItem>
              <BxMenuItem index="input">输入组件</BxMenuItem>
              <BxMenuItem index="display">数据展示</BxMenuItem>
              <BxMenuItem index="feedback">消息反馈</BxMenuItem>
              <BxMenuItem index="others">其他组件</BxMenuItem>
            </BxMenu>
          </div>
        </BxHeader>

        <!-- 主体内容 -->
        <BxLayout class="app-layout">
          <BxSider class="app-sider" width="240px">
            <div class="sider-content">
              <BxMenu :defaultActive="activeComponent" @select="handleComponentSelect">
                <template v-for="category in componentCategories" :key="category.key">
                  <BxSubMenu :index="category.key">
                    <template #title>{{ category.title }}</template>
                    <BxMenuItem 
                      v-for="component in category.components" 
                      :key="component.key"
                      :index="component.key"
                    >
                      {{ component.name }}
                    </BxMenuItem>
                  </BxSubMenu>
                </template>
              </BxMenu>
            </div>
          </BxSider>

          <BxContent class="app-content">
            <div class="content-wrapper">
              <!-- 组件概览 -->
              <div v-if="activeComponent === 'overview'" class="overview-section">
                <h1>Benxin UI 组件库</h1>
                <p class="overview-description">
                  基于Vue 3的现代化Liquid Glass风格组件库，提供80个高质量组件，助力快速构建美观的用户界面。
                </p>
                
                <BxCard class="stats-card">
                  <div class="stats-grid">
                    <BxStatistic title="总组件数" :value="80" />
                    <BxStatistic title="基础组件" :value="4" />
                    <BxStatistic title="布局组件" :value="9" />
                    <BxStatistic title="导航组件" :value="9" />
                    <BxStatistic title="输入组件" :value="19" />
                    <BxStatistic title="数据展示" :value="23" />
                    <BxStatistic title="消息反馈" :value="13" />
                    <BxStatistic title="其他组件" :value="3" />
                  </div>
                </BxCard>

                <h2>特色功能</h2>
                <div class="features-grid">
                  <BxCard v-for="feature in features" :key="feature.title" class="feature-card">
                    <BxIcon :name="feature.icon" class="feature-icon" />
                    <h3>{{ feature.title }}</h3>
                    <p>{{ feature.description }}</p>
                  </BxCard>
                </div>
              </div>

              <!-- 组件演示区域 -->
              <div v-else class="demo-section">
                <h1>{{ getCurrentComponent()?.name || '组件演示' }}</h1>
                <p v-if="getCurrentComponent()?.description" class="component-description">
                  {{ getCurrentComponent().description }}
                </p>

                <!-- 基础组件演示 -->
                <div v-if="activeComponent === 'button'" class="demo-group">
                  <h3>按钮类型</h3>
                  <BxSpace>
                    <BxButton>默认按钮</BxButton>
                    <BxButton theme="primary">主要按钮</BxButton>
                    <BxButton theme="success">成功按钮</BxButton>
                    <BxButton theme="warning">警告按钮</BxButton>
                    <BxButton theme="danger">危险按钮</BxButton>
                  </BxSpace>

                  <h3>按钮尺寸</h3>
                  <BxSpace>
                    <BxButton size="small">小型按钮</BxButton>
                    <BxButton size="medium">中型按钮</BxButton>
                    <BxButton size="large">大型按钮</BxButton>
                  </BxSpace>
                </div>

                <div v-if="activeComponent === 'card'" class="demo-group">
                  <h3>基础卡片</h3>
                  <BxCard title="卡片标题" class="demo-card">
                    <p>这是一个基础的卡片组件，采用了Liquid Glass风格设计。</p>
                    <template #footer>
                      <BxButton size="small">操作</BxButton>
                    </template>
                  </BxCard>
                </div>

                <div v-if="activeComponent === 'input'" class="demo-group">
                  <h3>输入框</h3>
                  <BxSpace direction="vertical" style="width: 100%;">
                    <BxInput v-model="inputValue" placeholder="请输入内容" />
                    <BxTextarea v-model="textareaValue" placeholder="请输入多行内容" />
                    <BxInputNumber v-model="numberValue" placeholder="请输入数字" />
                  </BxSpace>
                </div>

                <div v-if="activeComponent === 'table'" class="demo-group">
                  <h3>数据表格</h3>
                  <BxTable :data="tableData" class="demo-table">
                    <template #header>
                      <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>职业</th>
                        <th>操作</th>
                      </tr>
                    </template>
                    <template #body>
                      <tr v-for="item in tableData" :key="item.id">
                        <td>{{ item.name }}</td>
                        <td>{{ item.age }}</td>
                        <td>{{ item.job }}</td>
                        <td>
                          <BxButton size="small" variant="text">编辑</BxButton>
                          <BxButton size="small" variant="text" theme="danger">删除</BxButton>
                        </td>
                      </tr>
                    </template>
                  </BxTable>
                </div>

                <div v-if="activeComponent === 'modal'" class="demo-group">
                  <h3>模态框</h3>
                  <BxSpace>
                    <BxButton @click="showModal = true">打开模态框</BxButton>
                    <BxButton @click="showDrawer = true">打开抽屉</BxButton>
                  </BxSpace>
                </div>

                <!-- 通用演示区域 -->
                <div v-if="!['overview', 'button', 'card', 'input', 'table', 'modal'].includes(activeComponent)" class="demo-group">
                  <BxAlert type="info" :closable="false">
                    {{ getCurrentComponent()?.name || '该组件' }}演示正在开发中，敬请期待！
                  </BxAlert>
                </div>
              </div>
            </div>
          </BxContent>
        </BxLayout>

        <!-- 返回顶部 -->
        <BxBackTop />

        <!-- 模态框演示 -->
        <BxModal v-model="showModal" title="演示模态框">
          <p>这是一个演示模态框，采用了Liquid Glass风格设计。</p>
          <template #footer>
            <BxButton @click="showModal = false">取消</BxButton>
            <BxButton theme="primary" @click="showModal = false">确定</BxButton>
          </template>
        </BxModal>

        <!-- 抽屉演示 -->
        <BxDrawer v-model="showDrawer" title="演示抽屉">
          <p>这是一个演示抽屉，采用了Liquid Glass风格设计。</p>
        </BxDrawer>
      </div>
    </BxConfigProvider>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import BenxinUI from './index.js'

export default {
  name: 'App',
  setup() {
    const activeMenu = ref('overview')
    const activeComponent = ref('overview')
    const showModal = ref(false)
    const showDrawer = ref(false)
    const inputValue = ref('')
    const textareaValue = ref('')
    const numberValue = ref(0)

    const globalConfig = {
      theme: 'liquid-glass'
    }

    const features = [
      {
        icon: 'palette',
        title: 'Liquid Glass 设计',
        description: '采用现代化的玻璃拟态设计风格，视觉效果精美'
      },
      {
        icon: 'zap',
        title: 'Vue 3 + Composition API',
        description: '基于最新的Vue 3技术栈，性能优异'
      },
      {
        icon: 'grid',
        title: '80+ 组件',
        description: '提供丰富的组件库，覆盖各种业务场景'
      },
      {
        icon: 'smartphone',
        title: '响应式设计',
        description: '完美适配桌面端和移动端设备'
      }
    ]

    const tableData = [
      { id: 1, name: '张三', age: 25, job: '前端工程师' },
      { id: 2, name: '李四', age: 30, job: '后端工程师' },
      { id: 3, name: '王五', age: 28, job: '产品经理' }
    ]

    const componentCategories = [
      {
        key: 'basic',
        title: '基础组件',
        components: [
          { key: 'button', name: 'Button 按钮', description: '基础的按钮组件' },
          { key: 'icon', name: 'Icon 图标', description: '图标组件' },
          { key: 'link', name: 'Link 链接', description: '链接组件' },
          { key: 'typography', name: 'Typography 排版', description: '排版组件' }
        ]
      },
      {
        key: 'layout',
        title: '布局组件',
        components: [
          { key: 'grid', name: 'Grid 栅格', description: '栅格布局组件' },
          { key: 'layout', name: 'Layout 布局', description: '页面布局组件' },
          { key: 'divider', name: 'Divider 分割线', description: '分割线组件' },
          { key: 'space', name: 'Space 间距', description: '间距组件' }
        ]
      },
      {
        key: 'navigation',
        title: '导航组件',
        components: [
          { key: 'menu', name: 'Menu 导航菜单', description: '导航菜单组件' },
          { key: 'breadcrumb', name: 'Breadcrumb 面包屑', description: '面包屑导航组件' },
          { key: 'pagination', name: 'Pagination 分页', description: '分页组件' },
          { key: 'steps', name: 'Steps 步骤条', description: '步骤条组件' }
        ]
      },
      {
        key: 'input',
        title: '输入组件',
        components: [
          { key: 'input', name: 'Input 输入框', description: '输入框组件' },
          { key: 'select', name: 'Select 选择器', description: '选择器组件' },
          { key: 'checkbox', name: 'Checkbox 多选框', description: '多选框组件' },
          { key: 'radio', name: 'Radio 单选框', description: '单选框组件' }
        ]
      },
      {
        key: 'display',
        title: '数据展示',
        components: [
          { key: 'table', name: 'Table 表格', description: '数据表格组件' },
          { key: 'card', name: 'Card 卡片', description: '卡片组件' },
          { key: 'avatar', name: 'Avatar 头像', description: '头像组件' },
          { key: 'badge', name: 'Badge 徽标', description: '徽标组件' }
        ]
      },
      {
        key: 'feedback',
        title: '消息反馈',
        components: [
          { key: 'modal', name: 'Modal 模态框', description: '模态框组件' },
          { key: 'message', name: 'Message 全局提示', description: '全局提示组件' },
          { key: 'alert', name: 'Alert 警告提醒', description: '警告提醒组件' },
          { key: 'notification', name: 'Notification 通知', description: '通知组件' }
        ]
      }
    ]

    const getCurrentComponent = () => {
      for (const category of componentCategories) {
        const component = category.components.find(c => c.key === activeComponent.value)
        if (component) return component
      }
      return null
    }

    const handleMenuSelect = (index) => {
      activeMenu.value = index
      if (index === 'overview') {
        activeComponent.value = 'overview'
      }
    }

    const handleComponentSelect = (index) => {
      activeComponent.value = index
    }

    return {
      activeMenu,
      activeComponent,
      showModal,
      showDrawer,
      inputValue,
      textareaValue,
      numberValue,
      globalConfig,
      features,
      tableData,
      componentCategories,
      getCurrentComponent,
      handleMenuSelect,
      handleComponentSelect
    }
  }
}
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

#app {
  min-height: 100vh;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.logo .bx-icon {
  font-size: 28px;
  margin-right: 12px;
}

.app-layout {
  flex: 1;
  background: transparent;
}

.app-sider {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sider-content {
  padding: 16px 0;
}

.app-content {
  background: transparent;
  padding: 24px;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.overview-section h1 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 16px;
  text-align: center;
}

.overview-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.6;
}

.stats-card {
  margin-bottom: 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.overview-section h2 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 16px;
  text-align: center;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.feature-card {
  text-align: center;
  padding: 24px;
}

.feature-icon {
  font-size: 48px;
  color: rgba(0, 122, 255, 0.8);
  margin-bottom: 16px;
}

.feature-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--bx-text-primary);
}

.feature-card p {
  color: var(--bx-text-secondary);
  line-height: 1.5;
}

.demo-section h1 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 8px;
}

.component-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
}

.demo-group {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.demo-group h3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
}

.demo-card {
  max-width: 400px;
}

.demo-table {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-header {
    padding: 0 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .app-content {
    padding: 16px;
  }
  
  .overview-section h1 {
    font-size: 28px;
  }
  
  .overview-description {
    font-size: 16px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
}
</style>

